import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import Filter from '../../components/Filter/index';

const Search = () => {
    const dataSource = [{
        label: '姓名',
        filed: 'name',
        type: 'Input',
        isSelect: false,
        rules: [{required: true}],
        placeholder: '填写姓名',
    }, {
        label: '年龄',
        filed: 'age',
        type: 'InputNumber',
        isSelect: false,
        rules: [{required: true}],
        placeholder: '填写年龄',
    }, {
        label: '电话',
        filed: 'phone',
        type: 'Input',
        isSelect: false,
        placeholder: '填写电话',
        rules: [{required: true}],
    }, {
        label: '入职年份',
        filed: 'date',
        type: 'DatePicker',
        isSelect: false,
        placeholder: '填写入职年份',
        rules: [{required: true}],
    }, {
        label: '公司',
        filed: 'company',
        type: 'Select',
        isSelect: true,
        placeholder: '选择公司',
        rules: [{required: true}],
        dataType: 'CompanyList',
    },{
        label: '地址',
        filed: 'address',
        type: 'Cascader',
        isSelect: true,
        placeholder: '选择地址',
        rules: [{required: true}],
        dataType: 'AddressList',
    }];

    const FilterProps = {
        dataSource: dataSource,
        total: dataSource.length,   //总共有多少筛选条件
        showNumber: 6,  //可以展示的条件
        colNumber: 3,   //每一行显示的条件数
        formItemLayout: {  //一个搜索框的文字和框所占的比例
            labelCol: {
                xs: { span: 24 },
                sm: { span: 10 },
                md: { span: 8 },
                lg: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
                md: { span: 16 },
                lg: { span: 18 },
            },
        },
        onSubmit(values){
            console.log(values)
        }
    };

    return (
        <div style={{padding: 20}}>
            <Filter {...FilterProps}/>
        </div>
    )
};

Search.propTypes = {
    dispatch: PropTypes.func,
};

export default connect()(Search)
